import React,{useState,useEffect} from 'react';

const A =()=>{
    useEffect(()=>{
      console.log('A组件');
      return ()=>{
        console.log('A组件销毁了');
      }
    },[])
    return <div>ok</div>
  }


  const App1 =()=>{                        
    const [num,setNum] = useState(0);//声明状态
    //  数组里的名字  变量名，状态名；自己起的名字，一般以set开头
    const [user,setUser] =useState({username:'张三',age:18});
    //更新状态
    //状态的声明一定要放在最顶层，不要放在条件里，如果初始值是对象，更新完也应该是一个对象
    const add = ()=>{
      setNum(num+1);
    }
    const changeName =()=>{
      setUser({...user,age:20})//...获取原来的数据，后面age：20 将原来的age覆盖
    }


    useEffect(()=>{
      console.log('DidMount');
      // fetch();
      setNum(100);
      return () =>{
        console.log('componentWillUnMount')}
    },[])
    //useEffect的第一个回调函数返回的函数，相当于componentWillUnMount
    //空数组代表没有依赖，一共两个参数，第一个是回调函数，第二个是依赖（可写可不写）
    //如果写成[user]则当user改变的时候，输出会变
    //第二个参数是空数组的时候，此时useEffect相当于componentDidMount(组件某个周期执行的函数)
    //useEffect这个函数可以写多次，进行多次限制
    useEffect(()=>{
      console.log('页面有更新')
    })
    useEffect(()=>{
      console.log('num更新了')
    },[num])//第二个参数传入依赖或者不加第二个参数
    //此时相当于componentDidUpdata


    return(
      <div>
        <h1>Counter</h1>
        <h2>{num}</h2>
        <h2>{user.username}---{user.age}</h2>
        <button onClick={add}>点击+1</button>
        <button onClick={changeName}>点我更新姓名</button>
      </div>
    )
  }
  
  export default App1;